<template>
  <view class="container">
    <view class="title">柱状图</view>
    <view class="chart">
      <qiun-data-charts
        type="column"
        :opts="opts"
        :chartData="chartData" />
    </view>
    <view class="title">折线图</view>
    <view class="chart">
      <qiun-data-charts
        type="line"
        :opts="opts1"
        :chartData="chartData1" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        categories: ["2018","2019","2020","2021","2022","2023"],
        series: [
          {
            name: "目标值",
            data: [35,36,31,33,13,34]
          },
          {
            name: "完成量",
            data: [18,27,21,24,6,28]
          }
        ]
      },
      //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,15,0,5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      },
      chartData1: {
        categories: ["2018","2019","2020","2021","2022","2023"],
        series: [
          {
            name: "成交量A",
            data: [35,8,25,37,4,20]
          },
          {
            name: "成交量B",
            data: [70,40,65,100,44,68]
          },
          {
            name: "成交量C",
            data: [100,80,95,150,112,132]
          }
        ]
      },
      //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts1: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      },
    }
  },
}
</script>

<style scoped lang="scss">
.container {
  padding: 15px;

  .title {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
  }

  .chart {
    margin-bottom: 15px;
  }
}
</style>
